目指せ語学マスター　ハンズオンで翻訳Web APIつくってみた　～Ⅱ：API Gateway編～

はじめに

「Ⅱ」といって思い浮かぶものって・・・私は間違いなく「ドラゴンクエストⅡ」ですね。ふっかつのじゅもんで何度心を折られたことか。
さて、今回は「目指せ語学マスター　ハンズオンで翻訳Web APIつくってみた　～Ⅰ：Lambda編～」の続きで「～Ⅱ：API Gateway編～」です。
引き続き「AWS Hands-on for Beginners 〜Serverless #1〜」で翻訳Web APIをつくっていきましょう。
同じようにServerlessを体験してみようとお考えの方の参考になれば幸いです。

AWS Hands-on for Beginners 〜Serverless #1〜

このハンズオンは以下の構成となっていています。
　　1. Serverlessアーキテクチャの概要
　　2. AWS Lambdaの概要
　　3. AWS Lambdaハンズオン① Lambdaを単体で使ってみる
　　4. AWS Lambdaハンズオン② 他のサービスを呼び出してみる
　　5. Amazon API Gatewayの概要
　　6. Amazon API Gatewayハンズオン① API Gatewayを単体で使ってみる
　　7. Amazon API Gatewayハンズオン② API GatewayとLambdaを組み合わせる
　　8. Amazon DynamoDBの概要
　　9. Amazon DynamoDBハンズオン① テーブルを作ってみる
　　10. Amazon DynamoDBハンズオン② API GatewayとLambdaとDynamoDBを組み合わせる

最終的な構成図はこんな感じになります。 （構成図はハンズオン資料からの抜粋です）

前回はLambdaからAmazon Translateを呼び出して日本語を英語に変換してみましたので今回は「7.」のAPI Gateway部分までをやってみたいと思います。よっしゃー、がんばってやっていきましょう。
「目指せ語学マスター　ハンズオンで翻訳Web APIつくってみた　～Ⅰ：Lambda編～」が気になる方はこちらからどうぞ。
目指せ語学マスター　ハンズオンで翻訳Web APIつくってみた　～Ⅰ：Lambda編～

API Gateway単体で使ってみる

それではAPI Gatewayをさわっていきましょう。
Mockタイプを使用してAPI Gatewayを体験していきます。

作成してみる

まずは新しいAPIを作成していくのですが、ハンズオンでは「REST API」を選択してきます。

API名を入力してAPIの作成をしていきます。 エンドポイントタイプはハンズオンでは「リージョン」のままです。

APIができましたのでサンプルのリソースを作成してきましょう。
「アクションン」ボタンの「リソースの作成」を選んでいきます。

リソース名を入力しリソースを作成していきます。

無事にリソースが作成されました。

次に作成したリソースにメソッドを追加していきましょう。
リソースを選択した状態で「アクション」から「メソッドの作成」を選択します。

作成したらボックスから「GET」を選択します。この時忘れずにチェックボタンも押しましょう。

統合タイプを選択するのですが、ここではLambdaではなく「Mock」を選択して保存します。

GETメソッドが作成されましたね。

API単体のテストなので固定のJSONを返すようにするために統合レスポンスの設定を変更します。

統合レスポンスの画面で三角ボタンを押して表示を広げましょう。

「Content-Type」の「application/json」を選択して表示される記述エリアへJSON形式で記述していきましょう。

ハンズオンの場合はコードがあらかじめ用意されているのでコピーしてもいいですし、自分で打ち込んでもいいんです。
ちなみに私は講師の先生にならって打ち込んでみました。

テストしてみる

それではテストをしてみましょう。「テスト」のリンクを押します。

今回のハンズオンでは特にクエリ文字列やヘッダーに追加する必要はありませんので「テスト」してみましょう。

結果として先ほど記述したJSONが返ってくることがわかりました。
JSONと聞くと脳内で「ジェーソン」になって返ってくるのは私だけだと思います。。。
（「ジェーソン」は関東圏にあるディスカウントストアです。地域限定のお店って結構ありますよね。岩手の「薬王堂」とか・・・）

次にデプロイをしていきましょう。
GETメソッドのアクションから「APIのデプロイ」を選択します。

デプロイされる対象ステージは「新しいステージ」を選択しステージ名（今回は「dev」）を入力して「デプロイ」していきます。

APIのステージに新しく「dev」が作成されました。「dev」をクリックするとリソースとメソッドがあることがわかります。

GETメソッドを選択してみます。

画面上部にURLが表示されていますので押しちゃいましょう。

先ほどJSONで記述した内容が表示されました。

API GatewayとLambdaを組み合わせる

ここからはAPI GatewayとLambdaを組み合わせていきましょう。

API Gateway側の準備をしてみる

まずは先ほどAPI Geteway単体で使ってみるで作成したリソースを削除します。（あらあら）
メソッドを選んでアクションから「リソースの削除」を選択します。

新しくリソース「transelate」を作成します。
GETメソッドの統合タイプは「Lambda関数」ですね。

Lambdaの設定ですが「Lambda プロキシ統合の使用」をチェック、Lambdaリージョンは東京を選択しましょう。
Lambda 関数には作成している関数名を記入します。

保存をすると「API GatewayへLambda関数を呼び出す権限を与えようとしています」と表示されますのでＯＫを押しましょう。
API GatewayからLambda関数を呼び出したいのでむしろウィルカムですね。

リソースが作成されました。プロキシ統合の使用を選択しましたので統合レスポンスでの変更ができないようになっています。
続いてメソッドリクエストですね。

メソッドリクエストのURLクエリ文字列パラメータを開いて「クエリ文字列の追加」を選択します。

名前に「input_text」と入力し必須にチェックを入れます。必須のチェックボックスは右端のチェックボックスをチェックし登録することで選択できるようになります。

Lambda関数側の準備をしてみる

次にLambda関数の修正をしましょう。 API Gateway内からLambdaのコンソールへ移動できるんですね。

Lambda関数とAPI Gatewayが連携していることがわかります。

input_textを直書きするのではなくパラメータとして渡されたものを利用できるように変更したいのですが、うまくいくかテストもしたいので先に新しいテストイベントを作成しましょう。

イベントテンプレートから「apigateway-aws-proxy」を選択し「queryStringParameters」の中をinput_textとして修正し、テストイベント名を入力してイベントを作成します。

コード直書きだったinput_textを「queryStringParameters」から取得するように修正しましょう。

うまくいかくテストしてみます。。。（どきどき）
input_text「こんにちわ」が「Hello.」に翻訳されていますね。 やったね！。

テストをしてみる

それではAPIをデプロイして試してみましょう。
API Gatewayの画面からアクションのAPIのデプロイを選択します。

デプロイの先は前回作成した「dev」にします。

GETメソッドに表示されているURLを選択します。

input_textをパラメータとして指定していないので「Internal server error」と表示されました。。。

でも大丈夫！今度はinput_textを追記してURLを叩いてみましょう。
「こんばんわ」が「Good evening.」に翻訳されましたね。 やったね、やったね！

まとめ

ここまでAPI GatewayをさわってみてサクッとWeb APIを作ることができました。
いろんなサービスを組み合わせることによって簡単にやりたいことが出来るのでめちゃくちゃ楽しいです。
まだハンズオンは残っていますのでLambd、API Gateway、DynamoDBとの連携を体験して翻訳Web APIを作っていきたいですね。
同じようにServerlessを体験してみようとお考えの方の参考になれば幸いです。

NEXT　>>>　 目指せ語学マスター　ハンズオンで翻訳Web APIつくってみた　～Ⅲ：DynamoDB編～